<template>
    <div>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :model="formData" label-width="120px" size="mini">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="报修单号" required>
                  <el-input v-model="formData.bxcode" placeholder="系统自动生成" disabled></el-input>
                </el-form-item>
                <el-form-item label="报修人" required>
  <el-select v-model="formData.personName" placeholder="请选择" style="width: 322px" @change="handlePersonChange">
    <el-option value="请选择">请选择</el-option>
    <el-option v-for="type in PersonData" :key="type.userId" :label="type.userName" :value="type.userName"></el-option>
  </el-select>
</el-form-item>

                <el-form-item label="联系电话" required >
                  <el-input v-model="formData.phone"  placeholder="联系电话" disabled></el-input>
                </el-form-item>
                <el-form-item label="备注">
                  <el-input type="textarea" v-model="formData.notes" placeholder="请输入备注" ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修主题" required>
                  <el-input v-model="formData.title"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" required>
                  <el-input v-model="formData.deptName" placeholder="所属部门" disabled></el-input>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>


      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>设备信息</span>
          </div>
          <el-form :model="formData2" label-width="120px" size="mini">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="设备名称" required>
  <el-select v-model="formData2.name" placeholder="请选择" style="width: 322px" @change="handleSBChange">
    <el-option value="请选择">请选择</el-option>
    <el-option v-for="type in treeData" :key="type.eid" :label="type.name" :value="type.eid"></el-option>
  </el-select>
</el-form-item>

                <el-form-item label="设备类型" required>
                  <el-input v-model="formData2.deviceType"  disabled></el-input>
                </el-form-item>


                <el-form-item label="存放位置" required>
                  <el-input v-model="formData2.storageLocation" disabled></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="12">
                <el-form-item label="设备编号" required>
                  <el-input v-model="formData2.code"  disabled></el-input>
                </el-form-item>
                <el-form-item label="规格型号" required>
                  <el-input v-model="formData2.specifications"  disabled></el-input>
                </el-form-item>
                <el-form-item label="使用部门" required>
                  <el-input v-model="formData2.useDepartments"  disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>

      <div>
        <el-card class="box-card3">
          <div slot="header" class="clearfix">
            <span>故障信息</span>
          </div>
          <el-form :model="formData3" label-width="100px">
            <el-row :gutter="20">
              <el-col :span="12">
                  <el-form-item label="故障时间" required>
                  <el-date-picker v-model="formData3.endTime" placeholder="请选择时间" style="width: 100%;"></el-date-picker>
                </el-form-item>

                <el-form-item label="设备名称" required>
  <el-select v-model="formData3.endType" placeholder="请选择" style="width: 322px" @change="handleSBChange">
    <el-option value="请选择">请选择</el-option>
    <el-option v-for="type in endList" :key="type.ftId" :label="type.ftName" :value="type.ftName"></el-option>
  </el-select>
</el-form-item>


                <el-form-item label="备注">
                  <el-input type="textarea" v-model="formData3.notes" placeholder="请输入备注"></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="12">


                <el-form-item label="故障等级">
                  <el-select v-model="formData3.endLevel" placeholder="请选择" style="width: 70%;">
                    <el-option label="极高" value="极高"></el-option>
                    <el-option label="高" value="高"></el-option>
                    <el-option label="中" value="中"></el-option>
                    <el-option label="低" value="低"></el-option>
                  </el-select>
                </el-form-item>

                   <el-form-item label="是否停机">
                  <el-select v-model="formData3.isSpot" placeholder="请选择" style="width: 70%;">
                    <el-option label="是" value="0"></el-option>
                    <el-option label="否" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>


      <div style="height: 130px;">
        <el-footer class="footer">
          <el-button @click="handleCancel" style="margin-top: 20px; margin-left: -140px;">关闭</el-button>
          <el-button type="primary" @click="handleConfirm" style="margin-top: 20px; margin-left: 20px;">确认</el-button>
        </el-footer>
      </div>
    </div>
  </template>

  <script>
  // @ts-ignore
  import { list, addft, updateft, updatestate, delft,getPerson,getDeptAddPhone ,getEquipmentList,getFtList} from "@/api/test/frr";

  export default {
    data() {
      return {


        formData3: {
          endTime: '',
          endType: '',
          endLevel:'',
          notes:'',
          isSpot:''
        },
        //盘点范围
        formData2: {
          code: '',
          deviceType: "",
          specifications: '',
          storageLocation:"" ,
          useDepartments: '',
          name:""
        },
        //基础信息
        formData: {
          bxcode: "",
          personName: "",
          title: null,
          phone: null,
          deptName:"",
          notes: ""
        },
         ListData: [],
         PersonData:[],
         equipmentData:[],
         treeData: [], // 添加这个变量
         endList:[],
         currentPage: 1,
         pageSize: 10,
         inputText: "",
      };
    },

    created() {
    this.getList();
    this.getPerson();
    this.getEquipmentList();
    this.getFtLists()
  },
  watch: {
    inputText(newValue) {
      this.getList(); // 输入框内容变化时重新查询
    }
  },
    methods: {

      handlePersonChange(value) {
    if (value === '请选择') {
      console.log(null);
    } else {
      console.log("personName:",value);
      const data = {
        name:value
      };
      getDeptAddPhone(data).then((res) => {
        console.log("data-res:", res);
        console.log( res[0].userPhone);
          this.formData.phone=res[0].userPhone
          this.formData.deptName=res[0].userDeptId
      });
    }
  },

        getList() {
        const data = {
        page: this.currentPage,  // 使用当前页
        size: this.pageSize,  // 使用每页条数
        condition: this.inputText // 使用输入框的内容作为条件
      };
      list(data).then((res) => {
        console.log("data-res:", res);
        // this.ListData = res.records;  // 更新 ListData
      });
    },
    getPerson()
    {
        getPerson().then((res) => {
        console.log("PersonData-res:", res);
        this.PersonData = res;  // 更新 ListData
      });
    },

    getEquipmentList()
    {
      const data = {

        condition: this.inputText // 使用输入框的内容作为条件
      };
      getEquipmentList(data).then((res) => {
        console.log("getEquipmentList-res:", res);
        this.treeData = res; // 格式化数据为树形结构
      });
    },
    getFtLists()
    {
      const data = {
        page: this.currentPage,  // 使用当前页
        size: 1000,  // 使用每页条数
        condition: "" // 使用输入框的内容作为条件
      };
      getFtList(data).then((res) => {
        console.log("endList-res:", res);
        this.endList = res.records;
      });
    },

    handleSBChange(selectedEid) {
    // 打印选择的设备 ID
    console.log("选择的设备 ID:", selectedEid);

    // 根据选择的设备 ID 找到对应的设备信息
    const selectedDevice = this.treeData.find(device => device.eid === selectedEid);

    if (selectedDevice) {
      console.log(selectedDevice);
      // 将相关值赋值给 formData2
      this.formData2.deviceType = selectedDevice.deviceType || ""; // 假设设备类型字段为 deviceType
      this.formData2.specifications = selectedDevice.specifications || ""; // 假设规格型号字段为 specifications
      this.formData2.storageLocation = selectedDevice.storageLocation || ""; // 假设存放位置字段为 storageLocation
      this.formData2.useDepartments = selectedDevice.useDepartments || ""; // 假设使用部门字段为 useDepartments
      this.formData2.code = selectedDevice.code || ""; // 假设设备编号字段为 code
    } else {
      // 如果没有找到对应的设备，可以清空相关字段
      this.formData2.deviceType = "";
      this.formData2.specifications = "";
      this.formData2.storageLocation = "";
      this.formData2.useDepartments = "";
      this.formData2.code = "";
    }
  },



      //确认取消
      handleCancel() {
        this.$router.go(-1)
      },

      handleConfirm() {
    // 获取基础信息
    const { bxcode, personName, title, phone, deptName, notes } = this.formData;

    // 检查基础信息非空

    if (!personName) {
      alert("报修人不能为空");
      return;
    }
    if (!title) {
      alert("报修主题不能为空");
      return;
    }
    if (!phone) {
      alert("联系电话不能为空");
      return;
    }
    if (!deptName) {
      alert("所属部门不能为空");
      return;
    }
    // 备注字段可以为空，不需要检查

    // 获取设备信息
    const { code, deviceType, specifications, storageLocation, useDepartments, name } = this.formData2;

    // 检查设备信息非空
    if (!code) {
      alert("设备编号不能为空");
      return;
    }
    if (!deviceType) {
      alert("设备类型不能为空");
      return;
    }
    if (!specifications) {
      alert("规格型号不能为空");
      return;
    }
    if (!storageLocation) {
      alert("存放位置不能为空");
      return;
    }
    if (!useDepartments) {
      alert("使用部门不能为空");
      return;
    }
    if (!name) {
      alert("设备名称不能为空");
      return;
    }

    // 获取故障信息
    const { endTime, endType, endLevel, isSpot } = this.formData3;

   console.log("endTime:",endTime);

    // 检查故障信息非空
    if (!endTime) {
      alert("故障时间不能为空");
      return;
    }
    if (!endType) {
      alert("故障类别不能为空");
      return;
    }
    if (!endLevel) {
      alert("故障等级不能为空");
      return;
    }
    if (isSpot === '') {
      alert("是否停机不能为空");
      return;
    }



      // 将所有参数放入 data 对象中
      const data = {
      bxcode,
      personName,
      title,
      phone,
      deptName,
      notes,
      code,
      deviceType,
      specifications,
      storageLocation,
      useDepartments,
      name,
      endTime,
      endType,
      endLevel,
      isSpot
    };

    console.log("all-data:",data);
    //  add(data).then((res) => {
    //    console.log("add-res:", res);

    //  });

  },
    }
  };
  </script>

  <style scoped>
  /* 可以在这里定义样式 */
  .box-card5 {
    width: 200px;
    height: 300px;
  }

  .fixed-footer-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .footer {
    text-align: center;
    background-color: #eeeded;
    position: fixed;
    bottom: 0;
    z-index: 12;
    width: 100%;
  }

  .box-card {
    width: 1254px;
    margin-left: 30px;
    margin-top: 20px;
    height: 330px;
  }

  .box-card2 {
    width: 1254px;
    margin-left: 30px;
    margin-top: 20px;
  }

  .box-card3 {
    width: 1254px;
    margin-left: 30px;
    margin-top: 20px;
    height: 200px;
  }
  </style>
